<template>
	<div class="login-box">
		<img class="login-logo" src="../../assets/logo.png" />
		<h1 class="login-title">欢迎登录实时视频处理系统</h1>
		<el-form :model="form" :rules="rules" ref="form" class="login-form">
			<el-form-item label="账号" prop="loginName">
				<el-input v-model="form.loginName" placeholder="请输入账号"></el-input>
			</el-form-item>
			<el-form-item v-if="pageType !== 'terminal'" label="密码" prop="password">
				<el-input show-password v-model="form.password" placeholder="请输入密码"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button native-type="submit" type="primary" :loading="loading" @click="onSubmit"
					style="width: 100%;margin-top: 30px;">登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import {
	userLogin,
	terminalLogin
} from '@/api'
export default {
	name: 'Login',
	data() {
		return {
			form: {
				loginName: '',
				password: ''
			},
			rules: {
				loginName: [{
					required: true,
					message: '账号不能为空',
					trigger: ['blur', 'change']
				}],
				password: [{
					required: true,
					message: '密码不能为空',
					trigger: ['blur', 'change']
				}]
			},
			loading: false,
			pageType: '',// terminal 终端 computer 电脑 mobile 手机
		}
	},
	created() {
		const terminal = this.$route.query.terminal || localStorage.getItem('terminal')
		if (terminal) {
			this.pageType = 'terminal'
			this.form.loginName = localStorage.getItem('loginName')
		}
	},
	methods: {
		onSubmit() {
			this.$refs.form.validate(val => {
				if (val) {
					this.pageType === 'terminal' ? this.terminalLogin() : this.handleLogin()
				}
			})
		},
		// 用户登录
		async handleLogin() {
			this.loading = true
			userLogin(this.form).then(res => {
				this.$store.dispatch('GET_USERINFO')
				this.$router.push('/list')
			}).catch(err => {
				this.$message.error(err.msg || '请求失败')
			}).finally(res => {
				this.loading = false
			})
		},
		// 终端登录
		async terminalLogin() {
			this.loading = true
			terminalLogin({
				...this.form
			}).then(res => {
				localStorage.setItem('loginName', this.form.loginName)
				this.$store.dispatch('GET_USERINFO')
				this.$router.push({
					path: '/room',
					query: {
						code: res.data.meetingRoomCode
					}
				})
			}).catch(err => {
				this.$message.error(err.msg || '请求失败')
			}).finally(res => {
				this.loading = false
			})
		}
	}
}
</script>

<style>
.login-box {
	width: 100%;
	height: 100vh;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.login-form {
	padding: 5vh 8vw;
	min-width: 250px;
	box-shadow: 0px 0px 10px 0px rgba(216, 216, 216, 0.6);
	border-radius: 10px;
	text-align: center;
}

.login-logo {
	position: absolute;
	left: 8.5vw;
	top: 6.6vh;
	width: 14.1vw;
	height: 6.3vh;
	object-fit: contain;
}

.login-title {
	display: none;
	font-size: 18px;
	font-weight: bold;
	color: rgba(51, 51, 51, 0.9);
}

/*定义竖屏 css*/
@media screen and (orientation:portrait) {
	.login-box {
		flex-direction: column;
	}

	.login-logo {
		display: none;
	}

	.login-form {
		box-shadow: none;
	}

	.login-title {
		display: block;
	}
}
</style>
